<script>
import {defineComponent } from 'vue';
import axios from 'axios';
import HeaderComponent from "../common/header.vue"
import FooterComponent from "../common/footer.vue"


export default defineComponent({
    name: "Product",
    components:{ HeaderComponent, FooterComponent},
    data(){
        return{
            item    :   [],
            product     :   {}
        };
    },
    async created(){
        var productId = this.$route.params.productId;
         await axios.post('http://localhost:8090/catalog/viewProduct',{
          productId:this.$route.params.productId
        },{
          headers:{
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          this.product = response.data.data;
          this.item=response.data.data1;
         });

    },
    methods:{
        viewItem(productId) {
      // 导航到商品详情页面，并传递商品ID作为路由参数
      //this.$router.push({ name: 'product', params: { id: productId } });

      this.$router.push('/catalog/item/'+productId)
    },
        async add_to_cart(item){
            console.log('Got it:' + item.itemId)
            const res_login_info = await axios.get('http://localhost:8090/account/get_loginUser_info')
          console.log(res_login_info);
            var is_login = res_login_info.data.status==0?true:false
            if(is_login){
                console.log('ADDED TO CART')
                 await axios.post('http://localhost:8090/cart/addItemToCart',{
                   workingItemId: item.itemId
                 },{
                   headers:{
                     'Content-Type': 'multipart/form-data'
                   }
                 })
                //修改路由
                this.$router.push('/cart')
            }else{
                console.log('Sign in first')
                //修改路由
                this.$router.push('/catalog/main')
            }
        }
    }
})



</script>

<template>
<HeaderComponent />
<div class = "body11">
    <!-- <div id="BackLink">
 <a th:text="'Return to'+ ${product.categoryId}" th:href="@{viewCategory(categoryId=${product.categoryId})}">错误提示product.categoryId}</a>
<a href="/catalog/" + product.categoryId >Return to {{ product.categoryId }}</a>
</div> -->
<div id="BackLink">
    <router-link to="/catalog/main">Return to {{ product.categoryId }}</router-link>
</div>

  <div class="center">
      <div class="menu1" v-for=" (item,index) in item">
          <label>{{ product.description }}</label>
          <br>
          <label>Item ID:</label>
          <label>
            <a class="itemId" @click="viewItem(item.itemId)">{{item.itemId}}</a>
          </label>
          <br>
          <label>Product ID:</label>
          <label>{{item.productId}}</label>
          <br>
          <label>
           <span v-if="item.attribute1 !== null">
                  {{item.attribute1}}
            </span>
            <span v-if="item.attribute2 !== null">
                {{ item.attribute2 }}
            </span>
            <span v-if="item.attribute3 !== null">
                {{ item.attribute3 }}
            </span>
            <span v-if="item.attribute4 !== null">
                {{ item.attribute4 }}
            </span>
            <span v-if="item.attribute5 !== null">
                {{ item.attribute5 }}
            </span>
          </label>
          <br>
          <label>List Price:</label>
          <label>{{ item.listPrice }}</label>
          <br>
          <a class="Button"  @click="add_to_cart(item)">Add to Cart</a>
      </div>
  </div>

</div>

<FooterComponent />
</template>

<style scoped>
  @import "../../assets/css/product.css";
</style>